<template>
    <div class="alert alert-success alert-flash" role="alert" v-show="show">
        <strong></strong>{{ body }}
    </div>
</template>

<script>
    export default {
        props:['message'],

        data() {
            return {
                body : '',
                show:false
            }
        },

        created() {
            if(this.message){
                this.flash(this.message);
            }

            window.events.$on('flash',message => this.flash(message));
        },

        methods:{
            flash(message){
                this.body = message;
                this.show = true;

                this.hide();
            },

            hide(){
                setTimeout( () => {
                    this.show = false;
                },3000);
            }
        }
    };
</script>

<style>
    .alert-flash{
        position: fixed;
        right: 25px;
        bottom: 100px;
        z-index: 10000;
    }
</style>

